通过基础篇：后台同步可知，我们可通过后台同步机制来解决传统 Web 应用所存在的以下问题：

• 页面发起的请求会随着页面的关闭而终止。
• 在离线状态下，很难将用户的网络请求缓存起来，并在网络恢复正常后再次进行请求。
• 从而为用户提供了恶劣网络环境下，无感知事务处理的能力。在该章中我们已对底层 API 的使用进行了详细介绍，故本章不再重述相关细节，而是直接对 Workbox 相关接口进行介绍说明。

# 基本使用

Workbox 使用 workbox.backgroundSync.Plugin 完成后台同步的注册，比如：

workbox.routing.registerRoute(
  '/articles',
  new workbox.strategies.NetworkOnly({
    plugins: [
      new workbox.backgroundSync.Plugin('createArticle')
    ]
  }),
  'POST'
);

示例中，当 POST /articles 请求失败时，Workbox 会自动将该请求添加到后台同步队列 createArticle 中，并在 sync 事件中自动进行重试。其中 workbox.backgroundSync.Plugin 的参数按照顺序依次为：

• name：队列名称，该参数的值必须全局唯一，否则将抛出 duplicate-queue-name 异常。
• options: 配置信息，相关属性为
  • maxRetentionTime：请求的最大有效时长（单位为分钟，默认值为七天），如果请求超过所指定的期限，将从队列中移除。
  • onSync：sync 触发时的回调函数，该回调函数的参数为含有 queue（类型为 workbox.backgroundSync.Queue 实例）属性的对象，如不指定将调用 workbox.backgroundSync.Queue 实例的 replayRequests 方法。若指定该属性的值，如果回调函数处理失败，需要抛出异常，以便浏览器后续继续进行尝试。

由于 workbox.backgroundSync.Plugin 内部使用了 workbox.backgroundSync.Queue 来管理同步请求队列，因此我们可以使用它来自行控制请求被加入队列的时机，比如

const queue = new workbox.backgroundSync.Queue('createArticle');

self.addEventListener('fetch', event => {
  event.waitUntil(
    fetch(event.request.clone).catch(() => {
      return queue.pushRequest({ request: event.request });
    })
  );
});

示例中，我们首先定义了 workbox.backgroundSync.Queue 实例 queue，然后在 fetch 事件中，如果请求出现异常，则调用 queue 的 pushRequest 方法将相关请求添加到同步队列中，之后 sync 事件触发后将自动重试队列中的请求。由于 workbox.backgroundSync.Queue 的参数与 workbox.backgroundSync.Plugin 一致，故不再重述。

# 同步事件注册

为了启用后台同步，我们在页面中注册了同步事件，主要代码如下：

window.addEventListener('load', function() {
  if ('serviceWorker' in<